<template>
  <div class="box1">
    <div ref="echarts" class="leftEcharts" style="width:430px;height:300px" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  mounted() {
    this.drawChart()
  },
  methods: {
    drawChart() {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      var myChart = echarts.init(this.$refs.echarts)
      // 指定图表的配置项和数据
      const option = {
        title: {
          subtext: '单位：元',
          left: '50px'
        },
        grid: {
          x: 70,
          x2: 70,
          y2: 55
        },
        xAxis: {
          type: 'category',
          data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
        },
        yAxis: {
          type: 'value'

        },
        series: [
          {
            data: [262910, 435605, 534329, 551477, 377759, 590659, 0],
            type: 'line',
            color: 'red',
            smooth: true,
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#ffc3c4' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#fff' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            }
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    }
  }

}
</script>

<style lang='scss' scoped>
.box1{
  width: 450px;
  height: 400px;

}
.leftEcharts{
  right: 50px !important;
   height: 380px;
  //  margin-top: 20px;
}

</style>
